<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个js脚本</title>
</head>
<body>
<h1>我的第一个javascript 脚本</h1>
<p id="demo"></body>

    通过点击下面的按钮触发js脚本，可以替换文本哦！
</p>
<script>
    function myfunction() {
        document.getElementById("demo").innerHTML="Hello Javascript!!";
    }
</script>
<button type="button" onclick="myfunction()">点我试试</button>
<hr>
<h1>我的第二个javascript脚本</h1>
<p id="demo2">
    通过点击下面按钮触发js脚本，可以改变文本样式哦！
</p>
<script>
    function myfunction1() {
        x = document.getElementById("demo2"); <!--获取实例 -->
        x.style.color = "#FFE0C8";  <!--改变样式 -->
    }
</script>
<button type="button" onclick="myfunction1()">点我试试</button>
<hr>
<h1>第三个js脚本</h1>
<p id="demo3">
    通过点击下面按钮，改变本文本
</p>
<script>
    function style_change() {
        x=document.getElementById("demo3");
        x.style.backgroundColor="#eedece";
    }
</script>
<button type="button" onclick="style_change()">改变颜色</button>
</html>
